<template>
    <div>
        <div class="banner">
            <img src="@/assets/img/case/banner_d@2x.png" alt="banner">
        </div>
        <el-row class="content">
            <el-row class="contentInner">
                <NavStitle :routes="Case.nav" :links="links"/>
                <el-row class="routerView">
                    <p class="title">{{$t(`case.${currentRoute}.title`)}}</p>
                    <!-- <router-view/> -->
                    <Swiper :swipers="list" :showCover="true" @itemClick="itemClick"/>
                </el-row>
            </el-row>
        </el-row>
        <DetailDialog
            @close="currentItem=null"
            v-if="currentItem"
            :info="currentItem"/>
    </div>
</template>

<script>
import NavStitle from '@/components/navStitle';
import Swiper from '@/components/swiper';
import DetailDialog from '@/components/detailDialog';
export default {
    components:{NavStitle,Swiper,DetailDialog},
    data(){
        return {
            links:[
                '/case/minjian',
                '/case/jichang',
                '/case/ditie',
                '/case/guanlang',
                '/case/gaotie',
                '/case/daoqiao',
            ],
            currentRoute:"minjian",
            currentItem:null
        }
    },
    computed:{
        Case(){
            return this.$t("case");
        },
        list(){
            return this.$t(`case.${this.currentRoute}.list`)||[];
        }
    },
    watch:{
        '$route':function(newV) {
            this.currentRoute = newV.name;
        }
    },
    methods:{
        itemClick(item){
            this.currentItem = item;
        }
    }
}
</script>

<style lang="less" scoped>
.banner {
    height: 280px;
    background-color: pink;
    img {
        height: 280px;
        width: 100%;
    }
}
.content {
    margin-top: 37px;
    .contentInner {
        width:1280px;
        margin: 0 auto;
        .routerView {
            padding-top: 40px;
            .title {
                font-size:30px;
                font-weight:400;
                color:rgba(51,51,51,1);
                line-height:1;
                margin-bottom: 45px;
            }
        }
    }
}
</style>